<template>
  <div class="tool-button">

    <el-button size="small" type="primary" class="util-button left-button" @click="downloadFile">
      <el-icon class="util-icon">
        <CommonDownloadIcon/>
      </el-icon>
      下载文件
    </el-button>
    <el-button size="small" class="util-button right-button" @click="clickFull">
      <el-icon class="util-icon">
        <ScreenFullIcon/>
      </el-icon>
      全屏
    </el-button>
    <el-popover
        placement="bottom"
        :width="160"
        trigger="hover"
    >
      <template #reference>
        <InfoFilled style="width: 2em; height: 2em; margin-left: 8px;margin-top: 1px"/>
      </template>
      <div style="font-size: 15px;font-weight: bold">
        详细信息
      </div>
      <div style="font-size: 11px">
        <div class="detail-cell">
          <span></span>作者<span style="float: right">{{ details.author }}</span>
        </div>
        <div class="detail-cell">
          <span></span>上传时间<span style="float: right">{{ details.createTime }}</span>
        </div>
      </div>
    </el-popover>
  </div>
  <iframe v-if="suffix!=='md'" :src="src" id="mobsf" scrolling="auto" frameborder="0">
  </iframe>
  <MarkdownPreview :file-url="realUrl"
                   v-model:mark-mode="markMode"
                   id="mobsf"
                   v-if="suffix==='md'">
  </MarkdownPreview>
</template>
<script>
import {onMounted, reactive, ref, toRefs, watchEffect} from 'vue'
import screenfull from 'screenfull'
import CommonDownloadIcon from '@/components/common/CommonDownloadIcon'
import ScreenFullIcon from '@/components/common/ScreenFullIcon'
import {download} from '@/api/request'
import MarkdownPreview from '@/components/common/MarkdownPreview'
import {getDocumentInfo} from "../../api/document";
import router from "@/router";
import DetailIcon from '@/components/common/DetailIcon'

export default {
  components: {
    CommonDownloadIcon,
    ScreenFullIcon,
    MarkdownPreview
  },
  props: {
    url: String,
    documentId: Number,
    realUrl: String,
    label: String,
    type: String
  },
  setup(props) {
    const data = reactive({
      src: '',
      id: null,
      name: '',
      type: '',
      suffix: '',
    })
    const docId = router.currentRoute._rawValue.params.docId;   //2.在跳转页面定义router变量，解构得到指定的query和params传参的参数

    let filename;

    const details = reactive(
        {
          author: '',
          createTime: ''
        }
    );
    const markMode = ref("preview")

    const downloadFile = () => {
      var documentId = data.id;
      download('/admin/file/downloadFileByDocId', {'documentId': documentId}, filename);
    }
    const documentData = () => {
      getDocumentInfo(docId).then(res => {
        details.author = res.data.author
        details.createTime = res.data.createTime.substr(0, 11)
        filename = res.data.fileName
      })
    }

    watchEffect(() => {
      data.src = props.url
      data.id = props.documentId
      data.name = props.label
      data.type = props.type
      data.suffix = props.type
    })
    onMounted(() => {
      documentData();
    });
    return {
      ...toRefs(data),
      downloadFile,
      markMode,
      details,
      DetailIcon
    }
  },
  methods: {
    clickFull() {
      const ele = document.getElementById('mobsf');//指定全屏区域元素
      screenfull.request(ele)
    }
  },

}
</script>
<style scoped>
iframe {
  width: 100%;
  height: 100%;
}

.tool-button {
  display: inline-flex;
  position: absolute;
  z-index: 10;
  /*padding: 10px;*/
  top: 2.5%;
  right: 10%;
  background: white;
  border-radius: 6px;
  align-items: center;
}

.util-icon {
  margin-right: 0.4rem;
}

.util-button {
  padding: 1.09rem;
  background-color: #1A9B92;
  color: white;
  border-color: #1A9B92;
  font-size: 12px;
}

.right-button {
  background-color: white;
  border-color: #b8b4b4;
  color: black;
}

.left-button:active {
  background-color: #1a9b92a1 !important;
}

.right-button:active {
  background-color: #e6e6e6 !important;

}

.util-button:focus .util-icon, .util-button:hover .util-icon {
  color: #1A9B92;
}

.util-icon:focus, .util-icon:hover {
  color: #1A9B92;
}

.el-button + .el-button {
  margin-left: 8px;
}
</style>
